문제상황

<NoProfile size="..." /> 이렇게 컴포넌트를 하나 만들고 크기만 따로 props로 넘겨주면서 필요할때마다 다른 크기의 컴포넌트를 만들어 활용하려고 했다. 그런데, 6만 제대로 크기가 조절되고 나머지 모든 숫자들은 부모가 가진 flex 때문에 꽉 차버리게 됐다.

코드

import NoProfile from "public/no-profile";

export function Chat() {
  return (
    <div className="flex flex-col w-1/6 items-center">
      <div className="flex justify-center">
        <NoProfile size="full" />
      </div>
      <span>username</span>
    </div>
  );
}

export default function ChatList() {
  return (
    <div className="bg-gray-200 mt-6 rounded-xl p-4 grid grid-rows-1">
      <Chat />
    </div>
  );
}
///////
export default function NoProfile({ size }: { size: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={`size-${size}`}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
      />
    </svg>
  );
}

원인

테일윈드가 사용하는 JIT 컴파일러 방식 때문. 테일윈드는 (2.1버전 이후부터) 모든 가능한 클래스들을 미리 생성하고, 빌드시에 사용하지 않는것들을 제거하는 방식으로 작동했다. 그러나 지금은 반대로 코드에 직접 작성되어있는 클래스들만 생성한다.

즉, 동적으로 클래스를 변경하는 방법 size-${size}을 사용하면 빌드할 때 테일윈드 컴파일러가 유효한 클래스명이라고 알아보지 못해서 클래스를 생성하지 않아서 발생하는 문제.

해결

tailwind.config.ts에 세이프리스트를 작성해도 된다고 한다. 그러나 나는 prop mapping 방식을 사용하기로 했다.

function Button({ color, children }) {
	const colorVariants = {
	    blue: "bg-blue-600 hover:bg-blue-500",
	    red: "bg-red-600 hover:bg-red-500",  
	};  
	return (
	<button 
		className={`${colorVariants[color]} ...`}
	>
		{children}
	</button>
);}

클래스명을 담고있는 객체를 하나 만들어서 사용하는 방법. 객체 안에 이미 테일윈드 문법으로 작성된 클래스명이 있어서 컴파일러가 빼놓지 않고 클래스를 생성한다.